<template>
  <div>
    <div @click="showPopup">
      <slot />
    </div>

    <Popup
      title="切换科室"
      v-model="isDeptPopup"
      v-if="isDeptPopup"
      @onConfirm="changePopup"
    >
      <div class="hospital-list">
        <div
          class="hospital-item flex"
          v-for="item in deptList"
          :key="item.departmentId"
          @click="chooseDept(item)"
        >
          <div class="check-icon" :class="{ 'checked-icon': item.departmentId == currentDeptId}">
            <div class="iconfont" :class="item.departmentId == currentDeptId? 'iconxuanzhong' : 'iconweixuanzhong'" />
          </div>
          <div>
            <div class="hospital-dept-name">
              {{ item.departmentName }}
            </div>
            <div class="hospital-name">
              {{ item.hospitalName }}
            </div>
          </div>
        </div>
      </div>
    </Popup>


    <Popup
      v-model="isConfirmPopup"
      v-if="isConfirmPopup"
      @onConfirm="changeDept"
    >
      <div class="confirm-box">
        <div class="confirm-label">
          您当前浏览的科室为
        </div>
        <div class="confirm-content">
          {{ currentDept.hospitalName }}  {{ currentDept.departmentName }}
        </div>
        <div class="confirm-label">
          确定要跳转到
        </div>
        <div class="confirm-content">
          {{ nextDept.hospitalName }}  {{ nextDept.departmentName }}
        </div>
      </div>
    </Popup>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useCurrentDeptInfo } from '@/hooks/store';
import Popup from '@/components/Popup';
import process from '@/logic/process';
import { useService } from '@/utils/services';
import { ENTRY_PARAMS } from '@/constants/common';
import Storage from '@/utils/storage';
import { login } from '@/logic';
export default {
  components: {
    Popup
  },
  setup() {
    const isDeptPopup = ref(false);
    const isConfirmPopup = ref(false);
    const nextDept = ref({});

    const showPopup = () => {
      isDeptPopup.value = true;
    };
    const hidePopup = () => {
      isDeptPopup.value = false;
    };

    const store = useStore();
    const actions = useService();
    const currentDept = useCurrentDeptInfo();
    const currentDeptId = ref(currentDept.value?.departmentId);
    const deptList = computed(() => store.state.global.deptList);

    const chooseDept = (deptInfo) => {
      nextDept.value = deptInfo;
      currentDeptId.value = deptInfo.departmentId;
    };

    watch(
      () => currentDept,
      () => {
        currentDeptId.value = currentDept.value.departmentId;
      },
      {
        immediate: true,
        deep: true
      }
    );

    const changePopup = () => {
      hidePopup();

      if (
        nextDept.value.departmentId &&
        currentDept.value.departmentId != nextDept.value.departmentId
      ) {
        isConfirmPopup.value = true;
      }
    };

    const changeDept = () => {
      actions.hos
        .changeDept({
          departmentId: nextDept.value.departmentId
        })
        .then(async (res) => {
          let { patientsId, isScan, ...params } = Storage.get(ENTRY_PARAMS);
          Storage.set(ENTRY_PARAMS, {
            ...params,
            departmentId: res.departmentId,
            patientsId: res.patientsId
          });

          await login();
          setTimeout(() => {
            process.init();
          });
        })
        .finally(() => {
          isConfirmPopup.value = false;
        });
    };

    return {
      isDeptPopup,
      showPopup,
      hidePopup,
      deptList,
      currentDeptId,
      chooseDept,
      changeDept,
      nextDept,
      isConfirmPopup,
      changePopup,
      currentDept
    };
  }
};
</script>

<style lang="scss" scoped>
.hospital-list {
  padding: 20px 48px;

  .hospital-item {
    margin-bottom: 28px;
  }
  .check-icon {
    width: 40px;
    height: 40px;
    margin-right: 48px;
    color: #a2a6b8;
    &.checked-icon {
      color: #42c8c1;
    }
  }

  .hospital-dept-name {
    font-size: 34px;
    color: #373d52;
  }

  .hospital-name {
    font-size: 28px;
    color: #a2a6b8;
  }
}
.confirm-box {
  padding: 0 42px 20px 42px;
}

.confirm-label {
  font-size: 28px;
  font-weight: 400;
  color: #a2a6b8;
}

.confirm-content {
  font-size: 34px;
  font-weight: 400;
  color: #373d52;
  margin-bottom: 10px;
}
</style>